<template>
  <div class="Collection">
    <navBar :title="title"></navBar>
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getList"
    >
    <ul class="myCollectionList">
      <li class="myCollectionList_item" v-for="(item, index) in dataList.list" :key="index" @click="goItemDetails(item.goods_id)">
        <div class="myCollectionList_item_img">
          <img width="100%" :src="item.original_img" alt />
        </div>
        <div class="myCollectionList_item_info">
          <div class="myCollectionList_item_name">{{item.goods_name}}</div>
          <div class="specifications">规格: {{item.goods_name}}g</div>
          <div class="status" v-if="item.is_on_sale">关注</div>
          <div class="unit_price">
            <span class="price">{{item.shop_price}}</span>
            <span class="unit">/份</span>
          </div>
        </div>
      </li>
    </ul>
    </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import navBar from "components/navBar";
import { Icon, List, PullRefresh } from "vant";
Vue.use(Icon).use(List).use(PullRefresh);
export default {
  name: "Collection",
  data() {
    return {
      title: "我的收藏",
      dataList:{
        list:[],
        nowPage:0,
        totalPages:0
      },
      loading:false
    };
  },
  components: {
    navBar
  },
  computed:{
    finished(){
      if(this.dataList.totalPages > 0) {
        return this.dataList.nowPage <= this.dataList.totalPages;
      }
      return false;
    }
  },

  mounted(){
    this.getList();
  },
  methods: {
    getList(){
      this.loading = true
      this.$store.dispatch('myCollect', {
        p: this.dataList.nowPage + 1
      }).then(res => {
        console.log('log', res.data.result)
        this.dataList.list = this.dataList.list.concat(res.data.result.list)
        this.dataList.nowPage = res.data.result.page.nowPage
        this.dataList.totalPages = res.data.result.page.totalPages
        this.loading = false

      }).catch(err=>{
        this.loading = false
      })
    },
    onRefresh(){
      this.dataList.list = [];
      this.dataList.nowPage = 0;
      this.getList();
    },
    goItemDetails(id) {
      this.$router.push({ path: '/product_detail' , query:{id}});
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less" scoped >
.myCollectionList {
  padding-top: 9px;
  padding-left: 20px;
  .myCollectionList_item {
    position: relative;
    height: 107px;
    border-bottom: 1px solid #ededed;
    background-color: #fff;
    &:last-child {
      border-bottom: 1px solid transparent;
    }
    .myCollectionList_item_img,
    .myCollectionList_item_info {
      float: left;
    }
    .myCollectionList_item_img {
      width: 82px;
      height: 82px;
      border: 1px solid rgba(233, 233, 233, 1);
      margin-top: 13px;
      margin-right: 35px;
    }
    .myCollectionList_item_info {
      .myCollectionList_item_name {
        margin-top: 11px;
        font-size: 14px;
        font-family: PingFangSC-Medium;
        font-weight: 700;
        color: rgba(48, 48, 48, 1);
      }
      .specifications {
        font-size: 11px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }
      .status {
        position: absolute;
        top: 50px;
        width: 34px;
        height: 14px;
        line-height: 14px;
        background: linear-gradient(
          137deg,
          rgba(254, 102, 118, 1) 0%,
          rgba(244, 138, 152, 1) 100%
        );
        border-radius: 0px 7px 0px 7px;
        font-size: 9px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        text-align: center;
      }
      .unit_price {
        margin-top: 32px;
        font-size: 11px;
        font-family: PingFangSC-Medium;
        font-weight: 700;
        color: rgba(225, 52, 52, 1);
        .unit {
          font-size: 9px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(140, 140, 140, 1);
        }
      }
      .stepper {
        position: absolute;
        top: 73px;
        right: 34px;
        display: flex;
        .stepper_img {
          width: 28px;
          height: 22px;
        }
        .input_num {
          display: inline-block;
          padding: 4px 9px 3px 12px;
          background: rgba(247, 247, 247, 1);
          font-size: 11px;
          color: rgba(48, 48, 48, 1);
        }
      }
    }
  }
}
</style>
